<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
		@media screen and (min-width: 1024px) {
			.container{
				max-width: 677px;
			}
		}
		@media screen and (max-width: 1023px) {
			.container{
				min-width: 100%
			}
		}
		html{
			font-size:10px;
		}
		body{
			font-size:15px;
		}
		html,body{
			width:100%;
			height:100%;
			
		}
		.pre code{
			padding:2rem !important;
		}

			.hljs * {
				line-height: 2.8rem;
				font-size: 1.2rem;
			}
			.container {
				box-sizing: border-box;
				word-break: break-word;
				background-size: 2rem 2rem;
				background-position: center center;
				visibility: visible;
				color: black;
				padding:1rem 1.5rem;
				text-align: left;
				line-height: 1.25;
				letter-spacing: 2px;
			
				margin-left: auto;
				margin-right: auto;
				font-family: sans-serif;
				background-image: linear-gradient(
						90deg,
						rgba(50, 0, 0, 0.05) 3%,
						rgba(0, 0, 0, 0) 3%
					),
					linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
			}
			* {
				margin: 0;
				padding: 0;
				outline: 0;
			}
			.warrp{
				padding:2rem
			}
		</style>
	</head>
	<body>
	<div class="warrp">
	<div class="container"><%- data %></div>
	</div>
		
	</body>
</html>
